<template>
    <el-container>
        <el-header class='el-header'> 
            <el-steps :active="2" align-center finish-status="success"
            style="width:600px;margin-left:auto;margin-right:auto;margin-top:40px;">
                <el-step title="STEP 1" description="上传实体、关系文件"></el-step>
                <el-step title="STEP 2" description="定义实体属性、关系"></el-step>
                <el-step title="STEP 3" description="完成图谱构建"></el-step>
            </el-steps>
        </el-header>

        <el-main class="main">
            <div>
                <div style="margin-top:100px;">
                    <Loading style="width:120px;height:120px;margin:auto;"></Loading>
                </div>
                <div> 
                    <el-steps :active="progress" finish-status="success" align-center
                    style="width:600px;margin-left:auto;margin-right:auto;margin-top:40px;text-align: left">
                        <el-step title="分析定义" ></el-step>
                        <el-step title="节点创建" ></el-step>
                        <el-step title="关系连接"></el-step>
                    </el-steps>
                </div>
                <div style="display:flex;margin-top:30px;justify-content:center;">
                    <div><i class="el-icon-loading" style="font-size:10px;"></i></div>
                    <div style="color: #606266">{{progress_text}}</div> 
                </div>
                
            </div>
        </el-main>
        <el-footer style="height:22%;background-color:#f3f3f4;">

        </el-footer>
    </el-container>    
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
import finish_icon_path from '@/assets/complete.png'
import {DoubleBounce} from 'vue-loading-spinner'
export default {
    name:"upload",
    components: {
      Loading: DoubleBounce
    },
    data() {
        return {
            name: "上传文件",
            data: undefined,
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            finish_icon_path:finish_icon_path,
            loadingbut:false,
            loadingbutText:"点击查看",
            btnIcon:" ",
            progress: 0,
            progress_text: "正在定义节点和关系...",
            text:[" 正在定义节点和关系..."," 正在创建节点..."," 正在连接关系..."," 完成"],
            timer: null,
        }
    },
    created() {
        this.getRouterData()
    },
    beforeDestroy(){
        if(this.timer){
            clearInterval(this.timer); 
        }
    },
    methods: {
        getRouterData(){
            console.log(this.progress);
            this.data = this.$route.params.data;
            this.$store.state.panel_data = this.$route.params.data;
            let fileName=this.$store.state.fileName;
            axios.post("http://localhost:8000/creategraph/"+fileName+"/",JSON.stringify(this.data),{
            headers: {
                'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
            },
            }).then(res => {
                console.log(res);
                this.$router.push({ 
                    name:'Kgfinish_Disease',
                    params:{
                        graph_data: this.data,
                    }
                })
            });
            this.timer = setInterval(()=>{
                if(this.progress == 3){
                    clearInterval(this.timer);
                }
                axios.get("http://localhost:8000/get_progress/",{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                },
                }).then(res => {
                    this.progress = res.data;
                    this.progress_text = this.text[res.data]
                    console.log(this.progress);
                });
            },1000);
        },
        
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }
    
    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }

</style>